bitforum-frontend/app/(forum)/post/edit/[id]/style.scss

#postEdit {
	padding: 1.5625rem 2rem 2rem 2rem;

	h1 {
		font-size: 1.375rem;
		margin-bottom: 1.25rem;
	}

	min-width: 25.75rem;
	max-width: 80rem;
	margin: 0 auto;

	fieldset {
		display: flex;
		flex-direction: column;
		gap: 0;
		min-width: 0;

		section {
			margin-bottom: 0.4375rem;

			select, input, textarea {
				padding: 0.625rem;
				border-color: #ccced1;
				border-width: 0.0625rem;

				&:focus {
					border: 0.0625rem solid hsl(218, 81.8%, 56.9%);
					box-shadow: 0.125rem 0.125rem 0.1875rem rgba(0, 0, 0, .1) inset, 0 0;
					outline: none;
				}
			}

			// 분류, 말머리, 비밀글, 공지, 전체 공지
			&:nth-of-type(1) {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(0, max-content));
				justify-content: flex-start;
				align-items: center;
				gap: 0.4375rem;

				article {
					&:last-of-type {
						margin-left: 0.625rem;
					}

					label {
						padding-left: 0.625rem;
						padding-right: 0.75rem;
						cursor: pointer;
					}
				}
			}

			// 제목
			&:nth-of-type(2) {
				input {
					width: 100%;
				}
			}

			// CKEditor
			&:nth-of-type(3) {
				overflow: visible;
				box-sizing: border-box;
				margin-bottom: 0;

				> textarea {
					display: block;
					width: 100%;
					min-height: 18.75rem;
					border-bottom-left-radius: 0;
					border-bottom-right-radius: 0;
				}
			}

			// 태그
			&#postTag {
				margin-bottom: 0;
				padding: 0.5rem 0.625rem 0.4375rem 0.625rem;
				border: 0.0625rem solid #ccced1;
				border-width: 0 0.0625rem 0.0625rem 0.0625rem;
				position: relative;
				bottom: 0.0625rem;

				> .tag-input {
					display: flex;
					flex-direction: row;
					flex-wrap: wrap;
					justify-content: flex-start;
					align-items: center;
					gap: 0.625rem;

					> .tag {
						border: 0.0625rem solid #ccced1;
						border-radius: 0.125rem;
						padding: 0.0625rem 0.625rem;
						background-color: #f9fafb;

						> small {
							font-weight: normal;
							color: #333;

							&:hover {
								text-decoration: underline;
							}
						}

						> button {
							display: inline-block;
							vertical-align: text-bottom;
							margin-left: 0.4375rem;
							color: rgb(173, 0, 0);

							&:hover {
								color: red;
							}
						}
					}

					> input {
						border: transparent;
						flex-grow: 1;
						flex-basis: 0;

						&:hover,
						&:focus {
							border: transparent;
							box-shadow: none;
							outline: none;
						}
					}
				}
			}

			// 비회원 글쓰기
			&#anonymous {
				display: grid;
				grid-template-columns: repeat(auto-fit, minmax(0, max-content));
				justify-content: flex-start;
				align-items: center;
				gap: 0.4375rem;
				margin-top: 0.4375rem;
			}

			// 확인, 취소
			&:last-of-type {
				display: grid;
				grid-template-columns: auto auto;
				justify-content: center;
				align-items: center;
				gap: 0.4375rem;
			}
		}
	}
}